<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="box"></div>
  <template id="temp">
    <p>1111</p>
    <p>2222</p>
    <p>3333</p>
    <p>4444</p>
  </template>
  <script>
    const obox = document.querySelector("#box");
    // （1）
    // new DocumentFragment();
    const fragment =  document.createDocumentFragment();
    const ospan = document.createElement('span');
    ospan.id = 'span';
    ospan.textContent = '我要一点一点往上爬';
    fragment.appendChild(ospan);
    obox.appendChild(fragment);

    console.log(obox.querySelector('#span'))
    console.log(fragment.querySelector('#span')) // null appendChild到obox上后，自己就没有了
    // (2)
    const otemp = document.querySelector("#temp")
    console.log(otemp.content)
    obox.appendChild(document.importNode(otemp.content, true))

 </script>
</body>

</html>